<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { MoreActionsApi } from '@/api/controller';
  import { ToastError, ToastSuccess, Toastloading } from '@/utils/public';
  import { getPlayEndTime, getDateArray } from '@/utils'
  import { ElMessageBox } from 'element-plus';
  import msgForm from './components/msgForm.vue';
  import Pagination from "@/components/Pagination/index.vue";
  const msgFormRef = ref();
  const action = reactive({
    total:0,
    list:[] as any[],
    dateArr:getDateArray('ymdhis') as Array<number>
  })
  const listQuery = reactive({
    page:1,
    limit:20,
    send_status:''
  })
  const stateList = [
    {key:1,label:'发送成功'},
    {key:0,label:'待发送'},
    {key:2,label:'发送失败'},
  ]
  const resetQuery = ()=>{
    action.dateArr = getDateArray('ymdhis') as Array<number>
    Object.assign(listQuery,{
      page:1,
      limit:20,
      send_status:''
    })
    getList()
  }
  const handleSerach = ()=>{
    listQuery.page = 1
    getList()
  }
  const handleQuash = (row:any = {})=>{
    const { id:notifyid=0 } = row
    if(!notifyid) return ToastError('notifyid not defint')
    ElMessageBox.confirm("是否撤销此消息?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        const loading = Toastloading();
        MoreActionsApi.deletenotify({
          notifyid,
          status:1
        }).then(()=>{
          ToastSuccess("操作成功!");
          getList();
        }).catch(()=>{
          loading.close();
        })
        
      })
      .catch(() => { });
  }
  const getList = async()=> {
    const loading = Toastloading()
    const timeObi = getPlayEndTime(action.dateArr)
    const res = await MoreActionsApi.getnotifylist({
      start_time:timeObi.playTime,
      end_time:timeObi.endTime,
      ...listQuery
    })
    loading.close()
    const { data=[], total=0 } = res.data
    action.total = total
    action.list = data
  }
  const handleMsgForm = (row:any = {},msgFormType:string='')=>{
    msgFormRef.value.openDialog({
      ...row,
      msgFormType
    })
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">日期：</div>
          <el-date-picker
            v-model="action.dateArr"
            type="datetimerange"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <div class="labelItem">
          <div class="label">消息状态：</div>
          <el-select v-model="listQuery.send_status" clearable placeholder="请选择消息状态">
            <el-option
              v-for="item in stateList"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
          <el-button type="primary" @click="resetQuery">重置</el-button>
          <el-button type="primary" @click="handleMsgForm({notify_type:1})">官方公告</el-button>
          <el-button type="primary" @click="handleMsgForm({notify_type:2})">游戏公告</el-button>
        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column min-width="180" prop="create_time" label="提交时间" />
      <el-table-column min-width="120" prop="send_nums" label="发送条数" />
      <el-table-column min-width="120" prop="successNum" label="展示状态">
        <template #default="scope">
          {{ ['非全员','全员'][scope.row.is_all] }}
        </template>
      </el-table-column>
      <el-table-column min-width="120" show-overflow-tooltip prop="send_content" label="文案展示" />
      <el-table-column min-width="180" prop="send_time" label="发送时间" />
      <el-table-column min-width="120" prop="notify_type" label="发送类型">
        <template #default="scope">
          {{ ['','官方消息','游戏官方消息'][scope.row.notify_type] }}
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="send_status" label="发送状态">
        <template #default="scope">
          {{ ['待发送','发送成功','发送失败'][scope.row.send_status] }}
        </template>
      </el-table-column>
      <el-table-column min-width="120" show-overflow-tooltip prop="note" label="备注" />
      <el-table-column fixed="right" width="240" label="操作">
        <template #default="scope">
          <el-button @click="handleMsgForm(scope.row,'look')" type="primary">查看</el-button>
          <template v-if="scope.row.send_status == 0">
            <el-button @click="handleMsgForm(scope.row)" type="primary">修改</el-button>
            <el-button @click="handleQuash(scope.row)" type="danger">撤回</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <msgForm @update-list="getList" ref="msgFormRef" />
  </div>
</template>